import React, { useEffect, useState } from 'react';
import { Table, Button, Divider, Modal } from "antd";
import axios from "axios";
import {connect} from 'react-redux';
import { setStudent, setVisible } from '../../redux/actions/studentAction';
const {confirm} = Modal;
export default connect()(function(props){
    const change = pagination => {
        props.show(pagination.current, pagination.pageSize);
    };
    const del = id => {
        console.log(id);
        confirm({
            title: '删除？',
            content: '是否确认要删除？',
            onOk : () => {
                axios({
                    method:"delete",
                    url: "/students/" + id
                }).then(() => {
                    props.show();
                });
            }
          });
       
    }
    const showById = id => {
        props.dispatch(setVisible(true));
        props.dispatch(setStudent(id));
       
    };
    const columns = [
        {
            title: "姓名",
            dataIndex: "name",
            key: "name"
        },
        {
            title: "年龄",
            dataIndex: "age",
            key: "age"
        },
        {
            title: "性别",
            dataIndex: "gender",
            key: "gender"
        },
        {
            title: "操作",
            key: "action",
            render: (text, record) => (
                <span>
                    <Button onClick={() => showById(record._id)}>
                        修改
                    </Button>
                    <Divider type="vertical" />
                    <Button type="danger" onClick={() => del(record._id)}>删除</Button>
                </span>
            )
        }
    ];
    return (
        <div>
            <Table
                Table
                rowKey={record => record._id}
                onChange={change}
                dataSource={props.students}
                columns={columns}
                pagination={props.pagination}
            />
        </div>
    );
})